
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianmaopaidui"></use>
                    </svg>
                    <div class="name">天猫派对</div>
                    <div class="fontclass">#icon-tianmaopaidui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefuyouxian"></use>
                    </svg>
                    <div class="name">客服优先</div>
                    <div class="fontclass">#icon-kefuyouxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiao"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#icon-liebiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chongzhi"></use>
                    </svg>
                    <div class="name">充值</div>
                    <div class="fontclass">#icon-chongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kafei"></use>
                    </svg>
                    <div class="name">咖啡</div>
                    <div class="fontclass">#icon-kafei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yaopin"></use>
                    </svg>
                    <div class="name">药品</div>
                    <div class="fontclass">#icon-yaopin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hanbao"></use>
                    </svg>
                    <div class="name">汉堡</div>
                    <div class="fontclass">#icon-hanbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kouhong"></use>
                    </svg>
                    <div class="name">口红</div>
                    <div class="fontclass">#icon-kouhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tushu"></use>
                    </svg>
                    <div class="name">图书</div>
                    <div class="fontclass">#icon-tushu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-shouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiao1"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#icon-liebiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwucheman"></use>
                    </svg>
                    <div class="name">购物车满</div>
                    <div class="fontclass">#icon-gouwucheman</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huangguan"></use>
                    </svg>
                    <div class="name">皇冠</div>
                    <div class="fontclass">#icon-huangguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuzu"></use>
                    </svg>
                    <div class="name">出租</div>
                    <div class="fontclass">#icon-chuzu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiexiangbao"></use>
                    </svg>
                    <div class="name">鞋\箱包</div>
                    <div class="fontclass">#icon-xiexiangbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jingxuanshichang"></use>
                    </svg>
                    <div class="name">精选市场</div>
                    <div class="fontclass">#icon-jingxuanshichang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhubaoshipin"></use>
                    </svg>
                    <div class="name">珠宝饰品</div>
                    <div class="fontclass">#icon-zhubaoshipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shumashouji"></use>
                    </svg>
                    <div class="name">数码手机</div>
                    <div class="fontclass">#icon-shumashouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiebao"></use>
                    </svg>
                    <div class="name">鞋/包</div>
                    <div class="fontclass">#icon-xiebao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qichepeijian"></use>
                    </svg>
                    <div class="name">汽车配件</div>
                    <div class="fontclass">#icon-qichepeijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianmaoxingxiang1"></use>
                    </svg>
                    <div class="name">天猫形象1</div>
                    <div class="fontclass">#icon-tianmaoxingxiang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianmaoxingxiang2"></use>
                    </svg>
                    <div class="name">天猫形象2</div>
                    <div class="fontclass">#icon-tianmaoxingxiang2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiehuanqiyou"></use>
                    </svg>
                    <div class="name">切换器右</div>
                    <div class="fontclass">#icon-qiehuanqiyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiehuanqizuo"></use>
                    </svg>
                    <div class="name">切换器左</div>
                    <div class="fontclass">#icon-qiehuanqizuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiehuanqishang"></use>
                    </svg>
                    <div class="name">切换器（上）</div>
                    <div class="fontclass">#icon-qiehuanqishang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diqufucengjinruliangfantuananniu"></use>
                    </svg>
                    <div class="name">地区浮层进入梁饭团按钮</div>
                    <div class="fontclass">#icon-diqufucengjinruliangfantuananniu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diquxialajiantou"></use>
                    </svg>
                    <div class="name">地区下拉箭头</div>
                    <div class="fontclass">#icon-diquxialajiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diantileimu"></use>
                    </svg>
                    <div class="name">电梯类目</div>
                    <div class="fontclass">#icon-diantileimu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiliuqujinkoushipin"></use>
                    </svg>
                    <div class="name">回流区进口食品</div>
                    <div class="fontclass">#icon-huiliuqujinkoushipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantoucu"></use>
                    </svg>
                    <div class="name">箭头粗</div>
                    <div class="fontclass">#icon-jiantoucu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantouxi"></use>
                    </svg>
                    <div class="name">箭头细</div>
                    <div class="fontclass">#icon-jiantouxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiajuyongpin"></use>
                    </svg>
                    <div class="name">家居用品</div>
                    <div class="fontclass">#icon-jiajuyongpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodezichan"></use>
                    </svg>
                    <div class="name">我的资产</div>
                    <div class="fontclass">#icon-wodezichan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pinpai"></use>
                    </svg>
                    <div class="name">品牌</div>
                    <div class="fontclass">#icon-pinpai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianmaochaoshigouwuche"></use>
                    </svg>
                    <div class="name">天猫超市-购物车</div>
                    <div class="fontclass">#icon-tianmaochaoshigouwuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanyipi"></use>
                    </svg>
                    <div class="name">换一批</div>
                    <div class="fontclass">#icon-huanyipi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaojiantou"></use>
                    </svg>
                    <div class="name">小箭头</div>
                    <div class="fontclass">#icon-xiaojiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia"></use>
                    </svg>
                    <div class="name">加</div>
                    <div class="fontclass">#icon-jia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiguanzhu"></use>
                    </svg>
                    <div class="name">已关注</div>
                    <div class="fontclass">#icon-yiguanzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weiguanzhu"></use>
                    </svg>
                    <div class="name">未关注</div>
                    <div class="fontclass">#icon-weiguanzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiwen"></use>
                    </svg>
                    <div class="name">天猫提示-疑问</div>
                    <div class="fontclass">#icon-yiwen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chucuo"></use>
                    </svg>
                    <div class="name">天猫提示-出错</div>
                    <div class="fontclass">#icon-chucuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jingshi"></use>
                    </svg>
                    <div class="name">天猫提示-警示</div>
                    <div class="fontclass">#icon-jingshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengque"></use>
                    </svg>
                    <div class="name">天猫提示-正确</div>
                    <div class="fontclass">#icon-zhengque</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pinpaizhuanxiang"></use>
                    </svg>
                    <div class="name">品牌专享</div>
                    <div class="fontclass">#icon-pinpaizhuanxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gonggao"></use>
                    </svg>
                    <div class="name">天猫公告</div>
                    <div class="fontclass">#icon-gonggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianmaojisutuikuan"></use>
                    </svg>
                    <div class="name">天猫-极速退款</div>
                    <div class="fontclass">#icon-tianmaojisutuikuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianmaoqitiantuihuo"></use>
                    </svg>
                    <div class="name">天猫-七天退货</div>
                    <div class="fontclass">#icon-tianmaoqitiantuihuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wo"></use>
                    </svg>
                    <div class="name">我</div>
                    <div class="fontclass">#icon-wo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqing"></use>
                    </svg>
                    <div class="name">表情</div>
                    <div class="fontclass">#icon-biaoqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongnengjianyi"></use>
                    </svg>
                    <div class="name">功能建议</div>
                    <div class="fontclass">#icon-gongnengjianyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanyipi1"></use>
                    </svg>
                    <div class="name">换一批</div>
                    <div class="fontclass">#icon-huanyipi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengbo"></use>
                    </svg>
                    <div class="name">声波</div>
                    <div class="fontclass">#icon-shengbo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chiping"></use>
                    </svg>
                    <div class="name">持平</div>
                    <div class="fontclass">#icon-chiping</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiajiang"></use>
                    </svg>
                    <div class="name">下降</div>
                    <div class="fontclass">#icon-xiajiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrudianpu"></use>
                    </svg>
                    <div class="name">进入店铺</div>
                    <div class="fontclass">#icon-jinrudianpu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pengyouquan"></use>
                    </svg>
                    <div class="name">朋友圈</div>
                    <div class="fontclass">#icon-pengyouquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinlang"></use>
                    </svg>
                    <div class="name">新浪</div>
                    <div class="fontclass">#icon-xinlang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="fontclass">#icon-mima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lianjie"></use>
                    </svg>
                    <div class="name">链接</div>
                    <div class="fontclass">#icon-lianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#icon-dianzan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui8"></use>
                    </svg>
                    <div class="name">返回8</div>
                    <div class="fontclass">#icon-fanhui8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui7"></use>
                    </svg>
                    <div class="name">返回7</div>
                    <div class="fontclass">#icon-fanhui7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui6"></use>
                    </svg>
                    <div class="name">返回6</div>
                    <div class="fontclass">#icon-fanhui6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui5"></use>
                    </svg>
                    <div class="name">返回5</div>
                    <div class="fontclass">#icon-fanhui5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucangxuanzhong"></use>
                    </svg>
                    <div class="name">收藏-选中</div>
                    <div class="fontclass">#icon-shoucangxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucang"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="fontclass">#icon-shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui1"></use>
                    </svg>
                    <div class="name">返回1</div>
                    <div class="fontclass">#icon-fanhui1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui2"></use>
                    </svg>
                    <div class="name">返回2</div>
                    <div class="fontclass">#icon-fanhui2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui3"></use>
                    </svg>
                    <div class="name">返回3</div>
                    <div class="fontclass">#icon-fanhui3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui4"></use>
                    </svg>
                    <div class="name">返回4</div>
                    <div class="fontclass">#icon-fanhui4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tao"></use>
                    </svg>
                    <div class="name">淘</div>
                    <div class="fontclass">#icon-tao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mao"></use>
                    </svg>
                    <div class="name">猫</div>
                    <div class="fontclass">#icon-mao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixuanzhongyuanquan"></use>
                    </svg>
                    <div class="name">未选中圆圈</div>
                    <div class="fontclass">#icon-weixuanzhongyuanquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu2"></use>
                    </svg>
                    <div class="name">删除2</div>
                    <div class="fontclass">#icon-shanchu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huidaodingbu"></use>
                    </svg>
                    <div class="name">回到顶部</div>
                    <div class="fontclass">#icon-huidaodingbu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuchexuanzhong"></use>
                    </svg>
                    <div class="name">购物车-选中</div>
                    <div class="fontclass">#icon-gouwuchexuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodexuanzhong"></use>
                    </svg>
                    <div class="name">我的-选中</div>
                    <div class="fontclass">#icon-wodexuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paishexuanzhong"></use>
                    </svg>
                    <div class="name">拍摄-选中</div>
                    <div class="fontclass">#icon-paishexuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanyuwo"></use>
                    </svg>
                    <div class="name">关于我</div>
                    <div class="fontclass">#icon-guanyuwo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang"></use>
                    </svg>
                    <div class="name">search</div>
                    <div class="fontclass">#icon-fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cart"></use>
                    </svg>
                    <div class="name">cart</div>
                    <div class="fontclass">#icon-cart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                    <div class="name">home</div>
                    <div class="fontclass">#icon-home</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home2"></use>
                    </svg>
                    <div class="name">home2</div>
                    <div class="fontclass">#icon-home2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">search</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">refresh</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mine"></use>
                    </svg>
                    <div class="name">mine</div>
                    <div class="fontclass">#icon-mine</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mine2"></use>
                    </svg>
                    <div class="name">mine2</div>
                    <div class="fontclass">#icon-mine2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan2"></use>
                    </svg>
                    <div class="name">查看2</div>
                    <div class="fontclass">#icon-chakan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontscan"></use>
                    </svg>
                    <div class="name">扫码</div>
                    <div class="fontclass">#icon-iconfontscan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
